<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>教务管理</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">
		<!-- 自定义样式 -->
		<style scoped>
			.course-registration {
				min-height: 100vh;
				background-color: #f7f8fa;
				padding-bottom: calc(50px + env(safe-area-inset-bottom));
				font-size: 14px;
			}

			/* 主题色变量 */
			:root {
				--primary-gradient: linear-gradient(to right, #4481eb, #04befe);
				--warning-gradient: linear-gradient(to right, #f6d365, #fda085);
				--danger-gradient: linear-gradient(to right, #ff6b6b, #ff8e8e);
				--primary-color: #4481eb;
				--warning-color: #f6d365;
			}

			/* 渐变按钮 */
			.gradient-btn {
				background-image: var(--primary-gradient) !important;
				border: none !important;
				transition: opacity 0.3s ease !important;
			}

			.gradient-btn:active {
				opacity: 0.9 !important;
			}

			/* 图标颜色 */
			.text-primary {
				color: var(--primary-color);
			}

			/* 标题栏图标 */
			.custom-title {
				padding: 10px 16px;
				background-color: #fff;
				display: flex;
				align-items: center;
			}

			.custom-title .van-icon {
				font-size: 1.2em;
			}

			/* 卡片内图标 */
			:deep(.van-card__desc) .van-icon {
				color: var(--primary-color);
			}

			/* 渐变标签 */
			:deep(.van-tag--warning) {
				background-image: var(--warning-gradient) !important;
				border: none;
			}

			/* 删除按钮渐变 */
			:deep(.van-button--danger) {
				background-image: var(--danger-gradient) !important;
				border: none;
			}
			.submit-btn {
				display: flex;
				button {
					margin: 0 10px;
				}
			}

			/* 适配不同设备的字体大小 */
			@media screen and (min-width: 375px) {
				.course-registration {
					font-size: 16px;
				}
			}

			@media screen and (min-width: 414px) {
				.course-registration {
					font-size: 17px;
				}
			}

			/* iPhone X 及以上机型底部安全区域适配 */
			@supports (padding-bottom: env(safe-area-inset-bottom)) {
/* 				.submit-btn {
					padding-bottom: calc(16px + env(safe-area-inset-bottom));
				} */

				.van-tabbar {
					padding-bottom: env(safe-area-inset-bottom);
				}
			}

			.course-list {
				background-color: #fff;
				padding: 8px;
			}

			/* 响应式卡片布局 */
			:deep(.van-card) {
				background-color: #f7f8fa;
				font-size: 1em;
			}

			:deep(.van-card__title) {
				font-size: 1.1em;
			}

			:deep(.van-card__desc) {
				font-size: 0.9em;
			}

			:deep(.van-cell-group--inset) {
				margin: 12px;
				border-radius: 8px;
				overflow: hidden;
			}

			/* 适配折叠屏和大屏设备 */
			@media screen and (min-width: 768px) {
				:deep(.van-cell-group--inset) {
					max-width: 600px;
					margin: 12px auto;
				}

/* 				.submit-btn {
					max-width: 600px;
					left: 50%;
					transform: translateX(-50%);
				} */
			}

			/* 暗黑模式支持 */
			@media (prefers-color-scheme: dark) {
				.course-registration {
					background-color: #1c1c1e;
				}

				.custom-title,
				.course-list {
					background-color: #2c2c2e;
				}

				:deep(.van-card) {
					background-color: #2c2c2e;
				}

				:deep(.van-cell) {
					background-color: #2c2c2e;
				}
			}

			/* 横屏模式优化 */
			@media screen and (orientation: landscape) {
				.course-registration {
					display: flex;
					flex-direction: column;
				}

/* 				.submit-btn {
					position: static;
					margin: 16px;
				} */

				:deep(.van-tabbar) {
					position: static;
				}
			}

			/* 可访问性优化 */
			:deep(.van-button) {
				min-height: 44px;
			}

			:deep(.van-field__control) {
				min-height: 20px;
			}

			/* 触摸区域优化 */
			:deep(.van-stepper__minus),
			:deep(.van-stepper__plus) {
				min-width: 28px;
				min-height: 28px;
			}

			.submit-btn {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 16px;
				background-color: #fff;
				z-index: 100;
			}

			/* 动画效果 */
			.course-list .van-card {
				transition: transform 0.2s ease;
			}

			.course-list .van-card:active {
				transform: scale(0.98);
			}

			/* 加载动画 */
			@keyframes shimmer {
				0% {
					background-position: -200% 0;
				}

				100% {
					background-position: 200% 0;
				}
			}

			.loading {
				background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
				background-size: 200% 100%;
				animation: shimmer 1.5s infinite;
			}

			/* 添加图标动画效果 */
			.van-icon {
				transition: transform 0.3s ease;
			}

			.van-icon:hover {
				transform: scale(1.1);
			}

			/* 输入框图标样式 */
			:deep(.van-field__left-icon) {
				color: var(--primary-color);
			}

			/* 导航栏渐变背景 */
			:deep(.van-nav-bar) {
				background-image: var(--primary-gradient);
			}

			:deep(.van-nav-bar .van-icon),
			:deep(.van-nav-bar__title) {
				color: #fff !important;
			}

			/* 底部标签栏激活颜色 */
			:deep(.van-tabbar-item--active) {
				color: var(--primary-color) !important;
			}

			/* 步进器按钮样式 */
			:deep(.van-stepper__minus),
			:deep(.van-stepper__plus) {
				background-color: var(--primary-color) !important;
				color: #fff !important;
			}

			/* 添加阴影效果 */
			.van-cell-group--inset {
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
			}
			.text-red-500 {
				b {
					color: red;
					font-size: 1.5em;
				}
			}
			.font-18 {
				font-size: 1.2em;
				font-weight: bold;
				margin-bottom: 0.2em;
				display: block;
			}
			.mt-2 {
				.text-gray-600 {
					margin: 0.1em 0;
				}
				.text-sm {
					b {
						color: #1591ff;
						font-weight: normal;
					}
				}
			}
			.price-div {
				font-size: 1em;
				b {
					color: red;
					font-size: 1.3em;
				}
			}
/* 			:deep(.van-card__price) {
				color: #ff6b6b;
			} */
			
			
			
			
			/* 弹出层样式 */
			.course-popup {
			  padding: 16px;
			  height: 100%;
			  background-color: #fff;
			  display: flex;
			  flex-direction: column;
			}
			
			.popup-header {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  padding-bottom: 16px;
			  /* border-bottom: 2px solid #ffd60a; */
			  margin-bottom: 16px;
			  width: 100%;
			  .th {
				  font-size: 14px;
			  }
			}
			
			.popup-title {
			  font-size: 18px;
			  font-weight: bold;
			  position: relative;
			  padding-bottom: 4px;
			}
			
			.popup-title::after {
			  content: '';
			  position: absolute;
			  bottom: -16px;
			  left: 0;
			  width: 100%;
			  height: 2px;
			  background-color: #ffd60a;
			}
			
			.course-table {
			  /* flex: 1; */
			  overflow-y: auto;
			}
			
			.table-header {
			  display: grid;
			  grid-template-columns: 1fr 1fr 1fr 1fr;
			  background-color: #ffd60a;
			  color: #333;
			  font-weight: bold;
			  text-align: center;
			  padding: 12px 16px;
			  .th {
				  font-size: 14px;
			  }
			}
			
			.table-body {
			  padding: 0 16px;
			  .td {
				  font-size: 12px;
				   text-align: center;
			  }
			}
			
			.table-row {
			  display: grid;
			  grid-template-columns: 1fr 1fr 1fr 1fr;
			  padding: 12px 0;
			  border-bottom: 1px solid #eee;
			}
			
			.th, .td {
			  /* display: flex; */
			  align-items: center;
			}
			.flex {
				display: flex;
			}
			.course-name {
			  display: flex;
			  align-items: center;
			  color: #1989fa;
			}
			
			.dot {
			  width: 6px;
			  height: 6px;
			  background-color: #1989fa;
			  border-radius: 50%;
			  margin-right: 8px;
			}
			
			.price {
			  color: #ff525d;
			}
			
			/* 修改原有的选择课程标题点击样式 */
			.custom-title {
			  cursor: pointer;
			}
			
			:deep(.van-popup) {
			  max-height: 80vh;
			}
			
			/* 适配暗黑模式 */
			@media (prefers-color-scheme: dark) {
			  .course-popup {
			    background-color: #1c1c1e;
			  }
			  
			  .table-header {
			    background-color: #2c2c2e;
			    color: #fff;
			  }
			  
			  .table-row {
			    border-bottom-color: #2c2c2e;
			  }
			}
			
			/* 点击效果 */
			.custom-title:active {
			  opacity: 0.7;
			}
			
			
			
			.qr-border {
				text-align: center;
				margin: 20px 0;
				.q-img {
					text-align: center;
					padding-left: 60px;
				}
			}

			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
			}
			
			.van-cell-group--inset {
				border-radius: 0;
			}
			
		</style>

		<style>
			/* 全局样式修复 */
			:root {
				--van-padding-base: 12px;
				--van-padding-xs: 8px;
				--van-padding-sm: 12px;
				--van-padding-md: 16px;
				--van-padding-lg: 24px;
				--van-padding-xl: 32px;
			}

			/* 修复 iOS 点击高亮 */
			* {
				-webkit-tap-highlight-color: transparent;
			}

			/* 平滑滚动 */
			html {
				scroll-behavior: smooth;
			}

			/* 禁用双指缩放 */
			body {
				touch-action: manipulation;
			}

			/* 全局主题色变量 */
/* 			:root {
				--van-primary-color: #4481eb;
				--van-success-color: #07c160;
				--van-danger-color: #ff6b6b;
				--van-warning-color: #f6d365;
				--van-text-color: #323233;
				--van-active-color: #f2f3f5;
				--van-active-opacity: 0.7;
				--van-disabled-opacity: 0.5;
				--van-background: #f7f8fa;
			} */
		</style>
		<script src="/scriptZIP/qs.min.js"></script>
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/wechat/js/vant.min.js"></script>
<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/js/common.js"></script>
		<script src="/scriptZIP/dayjs.min.js"></script>
			<script src="/scriptZIP/qrcode.min.js"></script>
	</head>

	<body>

		<div class="course-registration" id="app">
			<!-- 顶部导航 -->
			<!-- <van-nav-bar title="报名课程" left-arrow @click-left="goBack" fixed placeholder /> -->

			<!-- 学生信息 -->
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>
			<van-cell-group inset class="mt-3">
				<div class="custom-title">
					<van-tag type="warning" size="medium">学生信息</van-tag>
				</div>
				<van-card :thumb="studentInfo.avatar">
					<template #title>
						<div class="flex items-center">
							<!-- <van-tag type="warning" plain>未报名</van-tag> -->
							<span class="ml-2 font-medium font-18">{{ studentInfo.name }}</span>
						</div>
					</template>
					<template #desc>
						<div class="mt-2">
							<p class="text-sm text-gray-600"><b>手机号：</b>{{ studentInfo.phone }}</p>
							<p class="text-sm text-gray-600"><b>就读学校：</b>{{ studentInfo.school }}</p>
							<p class="text-sm text-gray-600"><b>就读年级：</b>{{ studentInfo.grade }}</p>
						</div>
					</template>
				</van-card>
			</van-cell-group>

			<!-- 选择课程 -->
			<van-cell-group inset class="mt-3">
				<div class="custom-title">
					<van-button @click="showCourseGoPopup" style="color: #fdb139; height: 30px; border: 1px solid #fdb139;" color="linear-gradient(to bottom, #fffbff, #fbe1be) #2f9cff">选择课程</van-button>
				</div>
				<div class="course-list">
					<van-card v-for="(course, index) in courses" :key="index" :title="course.name" :price="course.price"
						:desc="'课程时间：' + course.startDate + ' — ' + course.endDate" class="mb-3">
						  <template #price>
						    <div class="price-div">购买金额： ¥<b>{{course.price}}</b></div>
						  </template>
						<template #tags>
							<div class="price-div">购买数量：{{course.quantity}} </div>
						</template>
						<template #footer>
							<van-button size="small" type="danger" plain @click="removeCourse(index)">
								删除
							</van-button>
						</template>
					</van-card>
				</div>
				<van-cell title="应付金额">
					<template #right-icon>
						<span class="text-xl font-medium text-red-500">¥<b>{{ totalAmount }}</b>元</span>
					</template>
				</van-cell>
			</van-cell-group>
			<!-- 类型 -->
			<van-cell-group inset class="mt-3" @click="showOrderTypePicker = true">
				<div class="custom-title">
					<va收款日期g type="warning" size="medium">类型</van-tag>
				</div>
				<van-field v-model="from2Ojb.orderTypeName" is-link readonly placeholder="请选择类型" />
			</van-cell-group>收款日期
			<!-- 经办日期 -->
			<van-cell-group inset class="mt-3" @click="showDatePicker = true">
				<div class="custom-title">
					<van-tag type="warning" size="medium">经办日期</van-tag>
				</div>
				<van-cell>
					<template #title>
						<van-icon name="calendar-o" class="mr-2 text-yellow-500" />
						<div v-if="from2Ojb.currentDate" style="float: right;">{{ from2Ojb.currentDate }}</div>
						<div style="color: #cacaca; float: right;" v-else>请选择时间</div>
					</template>
				</van-cell>
			</van-cell-group>

			<!-- 业绩归属人 -->
			<van-cell-group inset class="mt-3" @click="showStaffUserPicker = true">
				<div class="custom-title">
					<van-tag type="warning" size="medium">业绩归属人</van-tag>
				</div>
				<van-field v-model="from2Ojb.staffUserName" is-link readonly placeholder="请输入名字" />
			</van-cell-group>

			<!-- 备注信息 -->
			<van-cell-group inset class="mt-3 mb-24">
				<div class="custom-title">
					<van-tag type="warning" size="medium">备注信息</van-tag>
				</div>
				<van-field v-model="notes" type="textarea" rows="3" placeholder="请填写备注信息" />
			</van-cell-group>


			<!-- 立即报名按钮 -->
			<div class="submit-btn">
				<van-button type="primary" block @click="submitRegistration(1)">
					线下报名
				</van-button>
				<van-button type="warning" block @click="submitRegistration(2)">
					线上报名
				</van-button>
			</div>
			
			
			    <van-popup
			      v-model:show="showCourse2Popup"
			      position="bottom"
			      :style="{ height: '80%' }"
			      round
			    >
			      <div class="course-popup">
			        <div class="popup-header">
			          <div class="popup-title">全部课程</div>
			          <!-- <van-icon name="cross" @click="showCoursePopup2 = false" /> -->
			        </div>
			        <div class="course-table">
			          <div class="table-header">
			            <div class="th">课程名称</div>
			            <div class="th">收费方式</div>
			            <div class="th">购买数量</div>
						 <div class="th">小计</div>
			          </div>
			          <div class="table-body">
			            <div v-for="(course, index) in allCourses" :key="index" class="table-row">
			              <div class="td course-name">
			                <div class="dot"></div>
			                {{ course.name }}
			              </div>
						  <div class="td">
							  <p v-if="course.month && course.month.length > 0">按月</p>
							  <p v-if="course.dailyRate && course.dailyRate.length > 0">按天</p>
							  <p v-if="course.classHour && course.classHour.length > 0">按课时</p>
							  <p v-if="course.quarterlyHarvest && course.quarterlyHarvest.length > 0">按季</p>
							  <p v-if="course.forwardHarvest && course.forwardHarvest.length > 0">按期</p>
							  <p v-if="course.lessonPackage && course.lessonPackage.length > 0">按课包</p>
							  <p v-if="course.experience && course.experience.length > 0">按体验</p>
						  </div>
			              <div class="td">{{ course.number}}</div>
			              <div class="td price">
							  <p v-for="item in course.month">
							      <span><b class="price">{{item.name}} {{item.price}}</b>元/月</span>
							  </p>
							  <p v-for="item in course.dailyRate">
							      <span><b class="price">{{item.name}} {{item.price}}</b>元/天</span>
							  </p>
							  <p v-for="item in course.classHour">
							      <span><b class="price">{{item.name}} {{item.price}}</b>元/课时</span>
							  </p>
							  <p v-for="item in course.quarterlyHarvest">
							      <span><b class="price">{{item.name}} {{item.price}}</b>元/季</span>
							  </p>
							  <p v-for="item in course.forwardHarvest">
							      <span><b class="price">{{item.name}} {{item.price}}</b>元/期</span>
							  </p>
							  <p v-for="item in course.lessonPackage">
							      <span><b class="price">{{item.name}} {{item.price}}</b>元/课包</span>
							  </p>
							  <p v-for="item in course.experience">
							      <span><b class="price">{{item.name}} {{item.price}}</b>元/体验</span>
							  </p>
							  
						  </div>
			            </div>
			          </div>
					  
			        </div>
			      </div>
			    </van-popup>
			
			
			<!-- 课程列表弹出层 -->
			<van-popup
			  v-model:show="showCoursePopup"
			  position="center"
			  :style="{ height: '80%', width: '90%' }"
			  round
			>
			  <div class="course-popup">
			    <div class="popup-header">
			      <div class="popup-title">全部课程</div>
			      <van-icon name="cross" @click="showCoursePopup = false" />
			    </div>
			    <div class="course-table">
			      <div class="table-header">
			        <div class="th" >课程名称</div>
					<div class="th" >类型</div>
			        <div class="th">收费方式</div>
			        <div class="th">收费标准</div>
			      </div>
			      <div class="table-body">
			        <div v-for="(course, index) in allCourses" :key="index" class="table-row" @click="courseClick(course)">
			          <div class="td course-name" >
			            <div class="dot"></div>
			            {{ course.name }}
			          </div>
			          <div class="td flex">                               
						<span v-if="course.type==1">一对一</span>
                        <span v-else>一对多</span>
					  </div>
					  <div class="td ">
                                <p v-if="course.month && course.month.length > 0">按月</p>
                                <p v-if="course.dailyRate && course.dailyRate.length > 0">按天</p>
                                <p v-if="course.classHour && course.classHour.length > 0">按课时</p>
                                <p v-if="course.quarterlyHarvest && course.quarterlyHarvest.length > 0">按季</p>
                                <p v-if="course.forwardHarvest && course.forwardHarvest.length > 0">按期</p>
                                <p v-if="course.lessonPackage && course.lessonPackage.length > 0">按课包</p>
                                <p v-if="course.experience && course.experience.length > 0">按体验</p>
					  </div>
					  <div class="td" >
						  <p v-for="item in course.month">
						      <span><b class="price">{{item.name}} {{item.price}}</b>元/月</span>
						  </p>
						  <p v-for="item in course.dailyRate">
						      <span><b class="price">{{item.name}} {{item.price}}</b>元/天</span>
						  </p>
						  <p v-for="item in course.classHour">
						      <span><b class="price">{{item.name}} {{item.price}}</b>元/课时</span>
						  </p>
						  <p v-for="item in course.quarterlyHarvest">
						      <span><b class="price">{{item.name}} {{item.price}}</b>元/季</span>
						  </p>
						  <p v-for="item in course.forwardHarvest">
						      <span><b class="price">{{item.name}} {{item.price}}</b>元/期</span>
						  </p>
						  <p v-for="item in course.lessonPackage">
						      <span><b class="price">{{item.name}} {{item.price}}</b>元/课包</span>
						  </p>
						  <p v-for="item in course.experience">
						      <span><b class="price">{{item.name}} {{item.price}}</b>元/体验</span>
						  </p>
					  </div>
			          <!-- <div class="td" ><div class="price">{{ course.price }}</div>元/课时</div> -->
			        </div>
			      </div>
			    </div>
			  </div>
			</van-popup>
			
			
			
			<!-- 课程列表弹出层 -->
			<van-popup
			  v-model:show="showCourseOnlinePopup"
			  position="center"
			  :style="{ height: '80%', width: '90%' }"
			  round
			>
			  <div class="course-popup">
			    <div class="popup-header">
			      <div class="popup-title">全部课程</div>
			      <van-icon name="cross" @click="showCourseOnlinePopup = false" />
			    </div>
			    <div class="course-table">
			      <div class="table-header">
			        <div class="th" >课程名称</div>
			        <div class="th">课程时间</div>
					<div class="th" >购买数量</div>
			        <div class="th">小计</div>
			      </div>
			      <div class="table-body">
			        <div v-for="(course, index) in courses" :key="index" class="table-row" >
			          <div class="td course-name" >
			            <div class="dot"></div>
			            {{ course.name }}
			          </div>
			          <div class="td">  
						{{ course.startDate + ' — ' + course.endDate }}
					  </div>
					  <div class="td ">
						{{ course.quantity }}
					  </div>
					  <div class="td" >
						{{ course.price }}
					  </div>
			          <!-- <div class="td" ><div class="price">{{ course.price }}</div>元/课时</div> -->
			        </div>
			      收款日期v>
				  
			    </div>
				收款日期
				<!-- 经办日期 -->
				<van-cell-group inset class="mt-3" >
					<div class="custom-title">
						<van-tag type="warning" size="medium">经办日期</van-tag>
					</div>
					<van-cell>
						{{from2Ojb.currentDate}}
					</van-cell>
				</van-cell-group>
				
				<!-- 业绩归属人 -->
				<van-cell-group inset class="mt-3" >
					<div class="custom-title">
						<van-tag type="warning" size="medium">业绩归属人</van-tag>
					</div>
					<van-cell>
						{{from2Ojb.staffUserName}}
					</van-cell>
				</van-cell-group>
				
				<!-- 备注信息 -->
				<van-cell-group inset class="mt-3 mb-24">
					<div class="custom-title">
						<van-tag type="warning" size="medium">备注信息</van-tag>
					</div>
					<van-cell>
						{{notes}}
					</van-cell>
				</van-cell-group>
				
				<div class="qr-border">
					<div class="q-img" id="qrcode" ref="qrcode">
					</div>
				</div>
				
				
			  </div>
			</van-popup>
			
			
			<van-popup v-model:show="showStaffUserPicker" destroy-on-close position="bottom">
				  <van-picker
				    :columns="staffUser"
				    :model-value="pickerValue"
				    @confirm="onConfirmStaffUser"
				    @cancel="showStaffUserPicker = false"
				  />
			</van-popup>
			<van-popup v-model:show="showDatePicker" destroy-on-close position="bottom">
				<van-date-picker
				  v-model="currentDate"
				  title="选择日期"
				  :min-date="minDate"
				  :max-date="maxDate"
				  @confirm="onConfirmDatePicker"
				  @cancel="showDatePicker = false"
				/>
			</van-popup>
			<van-popup v-model:show="showOrderTypePicker" destroy-on-close position="bottom">
				  <van-picker
				    :columns="orderType"
				    :model-value="pickerValue"
				    @confirm="onConfirmOrderType"
				    @cancel="showOrderTypePicker = false"
				  />
			</van-popup>
			
		</div>





		<script>
			// 初始化 Vue 实例
			const app = Vue.createApp({
				data() {
					return {
						studentInfo: {
							avatar: 'https://placeholder.com/150',
							name: '',
							phone: '',
							school: '',
							grade: ''
						},
						courses: [],
						attribution: '',
						notes: '',
						totalAmount: 0,
						gradeList: [],
						showCoursePopup: false,
						showStaffUserPicker: false,
						showOrderTypePicker: false,
						showCourse2Popup: false,
						showDatePicker: false,
						staffUser: [],
						currentDate: [],
					    minDate: new Date(2020, 0, 1),
					    maxDate: new Date(2025, 5, 1),
						allCourses: [
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' },
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' },
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' },
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' },
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' },
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' },
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' },
						  // { name: '晚托', chargeType: '按月 按天', price: '198.67' }
						],
						orderType: [{text: '新签', value: 1}, {text: '续费', value: 2},{text: '新签尾款', value: 3}],
						from2Ojb: {
							
						},
						agentId: '',
						pageIndex: 1,
						pageSize: 100,
						showCourseOnlinePopup: false,
						getTeacherId: ''
					};
				},
				created: function() {
					this.agentId = localStorage.getItem('agentId');
					this.courseList = JSON.parse(sessionStorage.getItem('courseList'));
					this.courses = JSON.parse(sessionStorage.getItem('courses')) || [];
					this.getTeacherId = this.getTeacher().name
					

					this.studentId = params().studentId;
					this.getGrade()
					this.getStaffUser()
					this.visibleopen()
					if (this.courseList) {
						let courseOjb = {
								courseFeeStandard: this.courseList.courseFeeStandard,
								name: this.courseList.name,
								courseId: this.courseList.id,
								startDate: this.courseList.dateVal.split('-')[0],
								endDate: this.courseList.dateVal.split('-')[1],
								quantity: this.courseList.numberVals,
								price: this.courseList.subtotal ? this.courseList.subtotal : this.courseList.total,
								type: this.courseList.type,
								classesId: this.courseList.classVal
							}
						
						this.courses.push(courseOjb)
						sessionStorage.setItem('courses', JSON.stringify(this.courses))
					}
					if (this.courses) {
						this.totalAmount = 0
						this.courses.forEach((item) => {
							this.totalAmount = parseFloat(this.totalAmount) + parseFloat(item.price)
						})
					}
					// this.schoolId = localStorage.getItem('schoolId');
					

				},
				methods: {
					// 更新总金额
					updateTotal() {
						// return courses.value.reduce((sum: number, course: Course) => sum + course.price * course.quantity, 0)
					},
					getTeacher() {
						var s = sessionStorage["hxt-teacher"];
						return s ? JSON.parse(s) : null;
					},
					goBack() {
						history.back();
					},
					showCourseGoPopup() {
						this.goUrl('selectCourse.html')
					},

					// 删除课程
					removeCourse(index) {
						this.courses.splice(index, 1)
						this.totalAmount = 0
						this.courses.forEach((item) => {
							this.totalAmount = parseFloat(this.totalAmount) + parseFloat(item.price)
						})
						sessionStorage.setItem('courses', JSON.stringify(this.courses))
					},
					courseClick(course) {
						this.showCoursePopup = false
					},
					visibleopen() {
					    // console.log(this.input)
					    axios.get('/t/course/list/' + this.agentId, {
					        params: {
					            name: '',
					            pageNum: this.pageIndex,
					            pageSize: this.pageSize
					        }
					    }).then(function (res) {
					        this.allCourses = res.data.list;
					        // console.log(this.gridData, 'this.gridData');
					        // this.totalPage = res.data.total;
					        // console.log(res)
					    }.bind(this));
					},
					getGrade() {
						axios.get('/t/grade/all').then(function (res) {
							this.gradeList = res.data
							this.getList()
						}.bind(this));
					},
					getStaffUser() {
						axios.get('/t/staffUser/all/' + this.agentId).then(function (res) {
							res.data.forEach((item, index) => {
								this.staffUser.push({'text': item.name, 'value': item.id})
							});
						}.bind(this));
					},
					 checkDuplicateOrder(item) {
						 axios.get('/t/order/checkDuplicateOrder', {
								params: {
									studentId: this.studentId,
									courseId: item.courseId,
									startTime: item.startDate,
									endTime: item.endDate
								}
							}).then(function (res) {
								// if (res == 1) {
								// 	 alert(`课程已存在相同订单，不能重复报名`);
								// 	return
								// }
							}.bind(this));
					},
					
					//创建二维码
					createQr(data) {
						const qrcodeDiv = document.getElementById("qrcode");
						const qrcodeText = data.payQr
						const qrcodeOptions = {
							width: 200,
							height: 200,
						};
						this.qrimg = new QRCode(qrcodeDiv, {
							text: qrcodeText,
							...qrcodeOptions,
						});
						this.inquireOrder(data.orderId)
					},
					clearQRCodeInstance() {
						// 清除二维码实例
						if (this.qrimg) {
							this.qrimg.clear();
							this.$nextTick(() => {
								let dom = document.getElementById("qrcode")
								while (dom.firstChild) { dom.removeChild(dom.firstChild) }
							});
						}
					},
					//查询订单状态
					inquireOrder(id) {
						mysetInterval = setInterval(() => {
							axios.postForm('/t/order/order_paid', { orderId: id }).then(function (res) {
								console.log(res.data);
								if (res.data.code == 1) {
									this.setkecheng(id)
									clearInterval(mysetInterval);
									alert('支付成功')
									this.showCourseOnlinePopup = false
									// this.mask3 = false
									// location.href = "educational_student";
								}
							}.bind(this));
						}, 2000);
						setTimeout(() => {
							clearInterval(mysetInterval);
						}, 180000);
					},
					
					// 提交报名
					 submitRegistration(num) {
						if (num == 2) {
							this.showCourseOnlinePopup = true
							
						let selectedCourses = []
						let courseIdsStr = []
						this.courses.forEach((item) => {
							let courseOjb = {
								"courseName": item.name,
								"end_time": item.endDate,
								"start_time": item.startDate,
								"number": item.quantity,
								"courseId": item.courseId
								}
								selectedCourses.push(courseOjb)
								courseIdsStr.push(item.courseId)
						})
					
					    var obj = {
					        studentId: this.studentId,
					        courseIdsStr: JSON.stringify(courseIdsStr),
					        handlingDate1: this.from2Ojb.currentDate,
					        finalPayment1: this.from2Ojb.orderType,
					        cent: this.totalAmount * 100,
					        classesId: '',
					        remark: this.notes,
					        performance1: this.from2Ojb.people,
					        // orderType: this.getTeacherId,
					        handleUser: this.getTeacherId,
					        courseData: selectedCourses,
					        zongJia: this.totalAmount * 100,
					    };

							axios.post('/t/order/registration', obj).then(function (res) {
								this.createQr(res.data.data)
							}.bind(this));
						} else {
							this.pay1()				
						}
						
					},
					async pay1() {
					    // if (this.selectedCourses.length < 1) return alert('请选择课程');
					    // if(this.formLabelAlign.orderType==null) return alert('请选择类型')
					    // 循环遍历所有选中的课程
					    for (let i = 0; i < this.courses.length; i++) {
					        const course = this.courses[i];
					        // 检查重复订单的接口请求
					        try {
					            const response = await axios.get('/t/order/checkDuplicateOrder', {
					                params: {
										studentId: this.studentId,
										courseId: course.courseId,
										startTime: course.startDate,
										endTime: course.endDate
					                }
					            });
					
					            // 如果返回的数据 >= 1，表示存在重复订单，终止后继续操作
					            if (response.data >= 1) {
					                alert(`课程已存在相同订单，不能重复报名`);
					                return;  // 终止函数执行
					            }
					        } catch (error) {
					            console.error("检查重复订单时出错:", error);
					            alert("检查订单时出现错误，请稍后再试");
					            return; // 出现错误时终止后续操作
					        }
					    }
					
					//     // 如果所有课程都通过了检查，则继续执行后续操作 
					//     var name = localStorage.getItem('staffUserName');
					let selectedCourses = []
					let courseIdsStr = []
					this.courses.forEach((item) => {
						let courseOjb = {
							"courseName": item.name,
							"end_time": item.endDate,
							"start_time": item.startDate,
							"number": item.quantity,
							"courseId": item.courseId
							}
							selectedCourses.push(courseOjb)
							courseIdsStr.push(item.courseId)
					})
					
						
					
					    var obj = {
					        studentId: this.studentId,
					        courseIdsStr: JSON.stringify(courseIdsStr),
					        handlingDate1: this.from2Ojb.currentDate,
					        finalPayment1: this.from2Ojb.orderType,
					        cent: this.totalAmount * 100,
					        classesId: '',
					        remark: this.notes,
					        performance1: this.from2Ojb.people,
					        // orderType: this.getTeacherId,
					        handleUser: this.getTeacherId,
					        courseData: selectedCourses,
					        zongJia: this.totalAmount * 100,
					    };
					
					//     var courseIdsStrArr = [];
					//     var classesIdArr = [];
					
					//     // 获取课程 ID 和班级 ID
					//     for (let i = 0; i < this.selectedCourses.length; i++) {
					//         courseIdsStrArr.push(this.selectedCourses[i].courseId);
					//         if (this.selectedCourses[i].classesId) {
					//             classesIdArr.push(this.selectedCourses[i].classesId);
					//         }
					//     }
					
					//     obj.courseIdsStr = JSON.stringify(courseIdsStrArr);
					//     if (classesIdArr.length) obj.classesId = JSON.stringify(classesIdArr);
					
					//     // 提交订单
					    try {
					        const res = await axios.post('/t/order/manualReconciliation', obj);
					        this.setkecheng(res.data.data);
					        // this.dialogVisible = true;
					    } catch (error) {
					        console.error("提交订单时出错:", error);
					        alert("提交订单时出现错误，请稍后再试");
					    }
					},
					shuju2(item) {
						var arr = []
						var obj = {}
					
						for (let i in item) {
							for (let j = 0; j < item[i].selectedRate.length; j++) {
								if (item[i].courseId == item[i].selectedRate[j].id) {
									obj.type = item[i].selectedRate[j].type
								}
							}
							obj.classesId = item[i].classesId
							obj.endTime = item[i].end_time
							obj.startTime = item[i].start_time
							const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
							const start = new Date(item[i].start_time);
							const end = new Date(item[i].end_time);
							if (obj.type == 1) {
								const diffDays = Math.round(Math.abs((start - end) / oneDay));
								obj.number = diffDays;
								obj.countNum = diffDays;
							} else if (obj.type == 2 || obj.type == 3) {
								obj.number = Number(item[i].number);
								obj.countNum = obj.number;
					
							}
					
							obj.courseId = item[i].selectedRateId
							arr.push(obj)
							obj = {}
						}
						return arr;
					},
					setkecheng(orderid) {
						
						// let courseList = []
						// courseList.push({
						// 	name: this.course.name,
						// 	className: this.classNames(this.classTime.classesId),
						// 	classList: this.classList,
						// 	selectedRate: newEntries,
						// 	selectedRateId: this.course.id,
						// 	number: Number(initialRate.number),
						// 	price: initialRate.price,
						// 	start_time: this.classTime.time1,
						// 	end_time: this.classTime.time2,
						// 	classesId: this.classTime.classesId,
						// 	courseId: initialRate.id,
						// });
						this.courses.forEach((item) => {
								const ojb = {
									"courseFeeStandard": item.courseFeeStandard, //课程详情文字
									"type":  parseInt(item.type), //课程累成 1按课时收费  2月收费，3天收费,4按季收费,5按期收费,6按课包收费,7按体验收费
									"classesId": item.classesId, //班级id
									"endTime": dayjs(item.endDate).format('YYYY-MM-DD'), //开始时间
									"startTime": dayjs(item.startDate).format('YYYY-MM-DD'), //到期时间
									"courseId": item.courseId, //课程id
									"coursePrice": item.price * 100, //原价转分
									"quantity": item.quantity, //数量
									"amount": item.price * 100, //实付转分
									"number": 24, //=总课次数
									"countNum": 24, //总课次数数量=开始时间-结束时间 减去工作日的天数 如果是选择课程类型是 1 3 6 7则传数量就好
									"orderId": orderid, //关联返回的订单id
									"studentId": this.studentId //学生id
								}
			
							
							// for (let i = 0; i < enroll.length; i++) {
							// 	enroll[i].orderId = orderid
							// }
							axios.post('/t/order/studentCourse', ojb).then(function (res) {
								// console.log(res.data);
								if (res.data.code == 1) {
									alert('学生成功报名该课程')
									// dialogVisible = false
									// location.href = "./teacher_center.html";
								}
							}.bind(this));
						})
						// var enroll = this.shuju2(this.courseList)

					},
					onAddClick() {
						this.goUrl('addStudent.html')
					},
					goUrl(url) {
						window.location = url
					},
					onConfirmStaffUser({ selectedValues, selectedOptions }) {
						this.from2Ojb.people = selectedOptions[0].value;
						this.from2Ojb.staffUserName = selectedOptions[0]?.text;
						this.showStaffUserPicker = false
					},
					onConfirmDatePicker({ selectedValues, selectedOptions }) {
						this.from2Ojb.currentDate = selectedValues.join('/');
						// this.from2Ojb.staffUserName = selectedOptions[0]?.text;
						this.showDatePicker = false
					},
					onConfirmOrderType({ selectedValues, selectedOptions }) {
						this.from2Ojb.orderType = selectedOptions[0].value;
						this.from2Ojb.orderTypeName = selectedOptions[0]?.text;
						this.showOrderTypePicker = false
					},
					getList() {
						axios.get('/t/student/' + this.studentId).then(function(res) {
							this.studentInfo.name = res.data.name
							this.studentInfo.phone = res.data.bindCode
							this.studentInfo.school = res.data.schoolName
							this.studentInfo.grade = this.gradeList[res.data.grade].name
							this.studentInfo.avatar = res.data.avatar || this.studentInfo.avatar
							// console.log('334444', this.gradeList(res.data.grade))
						}.bind(this));
					},
					enterShop() {
						vant.Toast("进入店铺");
					},

				},
				destroyed‌() {
					sessionStorage.removeItem('courseList')
				}
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>